<template>
  <b-col>
    <!-- 导航栏咯老复制粘贴了 -->
    <b-row>
      <NavigationBar :type="2" />
    </b-row>
    <!-- 轮播 -->
    <b-row class="border-bottom shadow-sm">
      <b-col v-if="fanju.data != null" class="px-0">
        <b-carousel controls fade>
          <b-carousel-slide :caption-html="getInfo(img)" v-for="img in fanju.today.episodes" :key="img.season_id">
            <template v-slot:img>
              <!-- <b-img-lazy center height="350" :src="'https://images.weserv.nl/?url='+img.ep_cover" /> -->
              <div :style="{background:'url(https://images.weserv.nl/?url='+img.ep_cover+') center' ,backgroundSize:'100%',height:'310px'}" />
            </template>
          </b-carousel-slide>
        </b-carousel>
      </b-col>
    </b-row>
    <!-- 番剧控制条 -->
    <b-row class="mt-2">
      <b-container class="bg-white border">
        <b-row>
          <b-col class="col-auto">
            <b-row class="ml-1 mt-1 mb-3 px-2">
              <span style="font-size:22px">番剧更新</span>
            </b-row>
          </b-col>
          <b-col class="col-auto">
            <b-row class="ml-1 my-2 px-2 rounded-pill border" style="max-width:500px;background-color:#d3d3d3">
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 0}"
                  @click="display = 0">周一</b-link>
              </b-col>
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 1}"
                  @click="display = 1">周二</b-link>
              </b-col>
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 2}"
                  @click="display = 2">周三</b-link>
              </b-col>
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 3}"
                  @click="display = 3">周四</b-link>
              </b-col>
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 4}"
                  @click="display = 4">周五</b-link>
              </b-col>
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 5}"
                  @click="display = 5">周六</b-link>
              </b-col>
              <b-col class="col-auto px-0 text-center">
                <b-link style="font-size:18px" class="px-3 text-dark rounded-pill my-2 text-decoration-none" :class="{'bg-white':display == 6}"
                  @click="display = 6">周日</b-link>
              </b-col>
            </b-row>
          </b-col>
        </b-row>
        <!-- 列表显示 -->
        <div class="d-flex flex-row daily" style="max-width:1300px" v-for="(f,index) in fanju.data" :key="f+createId()">
          <b-col v-show="display == index" style="max-width:230px" class="col-3 hold mb-5" v-for="one in f.episodes" :key="one.season_id">
            <b-row>
              <b-col>
                <b-row>
                  <b-col class="pr-0" @click="toDetatil(one.season_id)">
                    <b-img-lazy height="350" width="220" class="rounded-lg"
                      blank-src="https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp"
                      :src="'https://images.weserv.nl/?url='+one.cover" />
                  </b-col>
                </b-row>
                <b-row class="mt-2">
                  <b-col>
                    <span class="hold" @click="toDetatil(one.season_id)" style="font-family:HYZhengYuan-85S;font-size:18px">{{one.title}}</span>
                  </b-col>
                </b-row>
                <b-row>
                  <b-col>
                    <span class="text-muted" style="font-size:16px">{{one.pub_index}}</span>
                  </b-col>
                </b-row>
                <b-row>
                  <b-col>
                    <span style="font-size:16px">每周 {{one.pub_time}} 更新</span>
                  </b-col>
                </b-row>
              </b-col>
            </b-row>
          </b-col>
          <b-row v-if="display == index && f.episodes.length==0">
            <b-col class="text-center">
              今天没有番剧更新哦
            </b-col>
          </b-row>
        </div>

      </b-container>
    </b-row>
  </b-col>
</template>
<script>
import { nanoid } from 'nanoid'
import NavigationBar from '../NavigationBar'
export default {
  components: {
    NavigationBar,
  },
  props: {

  },
  data() {
    return {
      fanju: {
        data: null
      },
      display: 0,
    }
  },
  created() {
    this.$httpBangumi.getDailyBangumi().then((res) => {
      this.fanju = res;
      this.display = res.display;
      if (res.today.episodes.length == 0) {
        var today = {
          episodes: []
        }
        for (let i = 0; i < res.data.length; i++) {
          for (let j = 0; j < res.data[i].episodes.length; j++) {
            today.episodes.push(res.data[i].episodes[j]);
          }
        }
        this.fanju.today = today;
      }
      console.log(this.fanju);
    })
    document.title = "番剧-今日更新"
  },
  methods: {
    //整理轮播图中的番剧信息
    getInfo(obj) {
      return "<b-col class='rounded-pill px-4' style='background-color:#41414187'>" +
        "<span style='font-size:25px;font-family:HYZhengYuan-55S'>" + obj.title + "</span>"
        + "</b-col>"
    },
    //生成唯一id
    createId() {
      return nanoid(4);
    },
    //去详情页
    toDetatil(id) {
      this.$pageRedirect.toAnimationDetails(id, "ssid");
    },
  },
}
</script>
<style scoped>
.s {
  color: #d3d3d3;
}
.daily {
  overflow-x: hidden;
}
.daily:hover {
  overflow-x: overlay;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.604);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.hold:hover {
  cursor: pointer;
}
</style>
